<template>
  <el-dialog title="会员详细信息" :close-on-click-modal="false" :visible.sync="visible" fullscreen append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="会员详细" name='会员详细'>
        <el-form :model="dataForm" ref="dataForm" label-width="95px" size="mini">
          <div class="text item">
            <el-divider content-position="center">基本信息</el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="顾客姓名" prop="name">
                  <el-input v-model="dataForm.name" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="顾客性别" prop="gender">
                  <el-input v-if="dataForm.gender == 0" value="男" readonly></el-input>
                  <el-input v-if="dataForm.gender == 1" value="女" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出生日期" prop="birthDay">
                  <el-input v-model="dataForm.birthDay" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="dataForm.age" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="联系电话" prop="phone1">
                  <el-input v-model="dataForm.phone1" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="地区" prop="area">
                  <el-input v-model="dataForm.area" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="注册门店" prop="saleDeptName">
                  <el-input v-model="dataForm.saleDeptName" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关联顾客卡">
                  <el-input value="" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="邮编" prop="zipCode">
                  <el-input v-model="dataForm.zipCode" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="QQ号码" prop="qqNum">
                  <el-input v-model="dataForm.qqNum" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="E-Mail" prop="email">
                  <el-input v-model="dataForm.email" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="身份证号" prop="certificateNum">
                  <el-input v-model="dataForm.certificateNum" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="职业" prop="job">
                  <el-input v-model="dataForm.job" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="人群分类" prop="classify">
                  <el-input v-model="dataForm.classify" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="来源" prop="fatherMyopia">
                  <el-input v-model="dataForm.fatherMyopia" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="地址" prop="address">
                  <el-input v-model="dataForm.address" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-divider content-position="center">会员卡信息</el-divider>
            <el-row>
              <el-col :span="6">
                <el-form-item label="会员卡号" prop="customerCard">
                  <el-input v-model="dataForm.customerCard" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="会员卡类型" prop="cardType">
                  <el-input v-if="dataForm.cardType" value="会员卡" readonly></el-input>
                  <el-input v-else value="非会员" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="医院积分" prop="integral">
                  <el-input :value="dataForm.integral || 0" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="门店积分" prop="storesIntegral">
                  <el-input :value="dataForm.storesIntegral || 0" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="消费金额" prop="totalAmount">
                  <el-input :value="dataForm.totalAmount || 0" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="专属客服" prop="">
                  <el-input value="" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="主卡" prop="mainCard">
                  <el-input v-model="dataForm.mainCard" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="副卡" prop="secondaryCard">
                  <el-input v-model="dataForm.secondaryCard" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="消费次数" prop="consumptionNumber">
                  <el-input :value="dataForm.consumptionNumber || 0" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="memo">
                  <el-input v-model="dataForm.memo" readonly type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="病例信息" name="病例信息">
        <optometry-info v-if="twoVisible" ref="twoTab" :customerCard="dataForm.customerCard" :customerId="dataForm.id" :customerData="dataForm"></optometry-info>
      </el-tab-pane>
      <el-tab-pane label="销售信息" name="销售信息">
        <sale-info v-if="threeVisible" ref="threeTab" :customerCard="dataForm.customerCard" :customerId="dataForm.id"></sale-info>
      </el-tab-pane>
      <el-tab-pane label="顾客回访" name="顾客回访">
        <return-visit v-if="fourVisible" ref="fourTab" :customerCard="dataForm.customerCard" :customerId="dataForm.id"></return-visit>
      </el-tab-pane>
      <el-tab-pane label="顾客投诉" name="顾客投诉">
        <complaints v-if="fiveVisible" ref="fiveTab" :customerCard="dataForm.customerCard" :customerId="dataForm.id"></complaints>
      </el-tab-pane>
      <el-tab-pane label="积分记录" name="积分记录">
        <integral-record v-if="sixVisible" ref="sixTab" :customerCard="dataForm.customerCard" :customerId="dataForm.id"></integral-record>
      </el-tab-pane>
      <el-tab-pane label="积分转介绍记录">积分转介绍记录</el-tab-pane>
      <el-tab-pane label="储值卡记录" name="储值卡记录">
        <credit-card v-if="eightVisible" ref="eightTab" :customerCard="dataForm.customerCard" :customerId="dataForm.id"></credit-card>
      </el-tab-pane>
      <el-tab-pane label="挂号记录">挂号记录</el-tab-pane>
      <el-tab-pane label="眼部健康检查记录">眼部健康检查记录</el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
  import { getCustomerObj } from '@/api/eims/customer.js'
  import { fetchTree } from '@/api/admin/dept.js'
  import IntegralRecord from './integralRecord'
  import SaleInfo from './saleInfo'
  import OptometryInfo from './optometryInfo'
  import ReturnVisit from './returnVisit'
  import Complaints from './complaints'
  import CreditCard from './creditCard'

  export default {
    data() {
      return {
        activeName: '会员详细',
        visible: false,
        deptData: {},
        dataForm: {},
        twoVisible: false,
        threeVisible: false,
        fourVisible: false,
        fiveVisible: false,
        sixVisible: false,
        eightVisible: false
      }
    },
    components: {
      SaleInfo,
      IntegralRecord,
      OptometryInfo,
      ReturnVisit,
      Complaints,
      CreditCard
    },
    methods: {
      init(id, name) {
        this.getDeptName()
        this.activeName = name;
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            getCustomerObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
                this.deptData.forEach(item => {
                  if (item.id == this.dataForm.saleDeptId) {
                    this.dataForm.saleDeptName = item.name
                  }
                })
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      getDeptName(id) {
        fetchTree().then(response => {
          if(response.data.code == '0'){
            this.deptData = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      handleClick(tab, event) {
        if (tab.name == "会员详细") {} else if (tab.name == "病例信息") {
          this.twoVisible = true
          this.$nextTick(() => {
            this.$refs.twoTab.init(this.dataForm.id,this.dataForm.customerCard)
          })
        } else if (tab.name == "销售信息") {
          this.threeVisible = true
          this.$nextTick(() => {
            this.$refs.threeTab.init(this.dataForm.id,this.dataForm.customerCard)
          })
        } else if (tab.name == "顾客回访") {
          this.fourVisible = true
          this.$nextTick(() => {
            this.$refs.fourTab.init(this.dataForm.id,this.dataForm.customerCard)
          })
        } else if (tab.name == "顾客投诉") {
          this.fiveVisible = true
          this.$nextTick(() => {
            this.$refs.fiveTab.init(this.dataForm.id,this.dataForm.customerCard)
          })
        } else if (tab.name == "积分记录") {
          this.sixVisible = true
          this.$nextTick(() => {
            this.$refs.sixTab.init(this.dataForm.id,this.dataForm.customerCard)
          })
        } else if (tab.name == "储值卡记录") {
          this.eightVisible = true
          this.$nextTick(() => {
            this.$refs.eightTab.init(this.dataForm.id,this.dataForm.customerCard)
          })
        }
      },
    }
  }
</script>

<style lang="scss">

</style>
